<template>
    <div class="permission-management-container">
        <pageTitle :title="'權限組管理'" />

        <!-- 顶部搜索和按钮区域 -->
        <div class="top-action-bar">
            <el-row :gutter="20" align="middle">
                <el-col :span="6">
                    <el-input placeholder="請輸入關鍵字" v-model="searchQuery" class="search-input-with-button" clearable>
                        <template #append>
                            <el-button type="primary">
                                <el-icon>
                                    <Search />
                                </el-icon>
                            </el-button>
                        </template>
                    </el-input>
                </el-col>
                <el-col :span="18" class="action-buttons">
                    <el-button type="primary">
                        <el-icon>
                            <Plus />
                        </el-icon>
                        <span>新增權限組</span>
                    </el-button>
                </el-col>
            </el-row>
        </div>

        <!-- 權限組表格 -->
        <div class="permission-table-card">
            <el-table :data="permissionGroups" style="width: 100%" v-loading="loading" :border="false"
                :header-cell-style="{
                    borderBottom: '1px solid #ebeef5',
                    textAlign: 'center',
                    background: '#f8fafc',
                    fontWeight: '600',
                    color: '#333',
                    padding: '20px'
                }" :cell-style="{
                borderBottom: '1px solid #ebeef5',
                textAlign: 'center'
            }">
                <el-table-column prop="name" label="權限組名稱" width="220" align="center" />

                <el-table-column prop="description" label="描述" align="center" />

                <el-table-column label="權限配置" align="center">
                    <template #default="{ row }">
                        <div class="permission-list">
                            <div v-for="perm in row.permissions" :key="perm" class="permission-item">
                                {{ perm }}
                            </div>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column label="操作" width="180" fixed="right" align="center">
                    <template #default>
                        <el-button type="text" size="small">編輯</el-button>
                        <el-button type="text" size="small" class="danger-text">刪除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <div class="pagination-wrapper">
                <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                    :page-sizes="[10, 20, 50, 100]" :small="true" :background="true"
                    layout="total, sizes, prev, pager, next, jumper" :total="total" />
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { Search, Plus } from '@element-plus/icons-vue'
import pageTitle from "@/components/pageTitle/pageTitle.vue"

// 靜態數據
const searchQuery = ref('')
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(5)
const loading = ref(false)

// 權限組列表數據
const permissionGroups = ref([
    {
        id: 1,
        name: '人事管理',
        description: '管理組織人事相關權限',
        permissions: ['員工檔案', '考勤記錄', '組織架構']
    },
    {
        id: 2,
        name: '財務管理',
        description: '管理財務相關權限',
        permissions: ['財務報表', '收支記錄', '發票管理']
    },
    {
        id: 3,
        name: '客戶管理',
        description: '管理客戶相關權限',
        permissions: ['客戶列表', '客戶跟進', '客戶分析']
    },
    {
        id: 4,
        name: '系統管理',
        description: '管理系統設置權限',
        permissions: ['用戶管理', '權限設置', '系統日誌']
    },
    {
        id: 5,
        name: '訂單管理',
        description: '管理訂單處理權限',
        permissions: ['訂單創建', '訂單審核', '訂單查詢']
    }
])
</script>

<style scoped lang="less">
.permission-management-container {
    padding: 20px;
    background-color: #fff;

    .top-action-bar {
        margin-bottom: 20px;
        padding: 16px 24px;
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
        margin-top: 20px;

        .search-input-with-button {
            max-width: 500px;

            .el-input-group__append {
                background-color: var(--el-color-primary);
                color: white;
                border: none;

                &:hover {
                    opacity: 0.9;
                }
            }
        }

        .action-buttons {
            display: flex;
            justify-content: flex-end;
            gap: 12px;

            .el-button {
                display: inline-flex;
                align-items: center;
                gap: 6px;
            }
        }
    }

    .permission-table-card {
        padding: 16px;
        background-color: #fff;

        :deep(.el-table) {
            tr:hover td {
                background-color: #f5f7fa !important;
            }
        }

        .permission-list {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 8px;

            .permission-item {
                padding: 4px 8px;
                background-color: #f0f4ff;
                border-radius: 4px;
                color: #3366ff;
                font-size: 14px;
            }
        }

        .danger-text {
            color: var(--el-color-danger);
        }

        .pagination-wrapper {
            margin-top: 24px;
            display: flex;
            justify-content: flex-end;
        }
    }
}
</style>